const React = require('react');
const BaseDemo = require('./BaseDemo');
const InputNumber = require('InputNumber');
const Button = require('Button');
const Spinner = require('Spinner');
const TimePicker = require('TimePicker');
const Tile = require("./Tile");


let Tab1 = React.createClass({
    render(){
        return(<span>Tab1</span>);
    }
});

let Tab2 = React.createClass({
    render(){
        return(<span>Tab2</span>);
    }
});

class TabPage extends BaseDemo{

    render() {

        return (
            <div className="container">
                <Tile header={"基本使用方式"}>

                    <Spinner />
                    <Spinner size='small'/>
                    <TimePicker value="16:30:30" secondStep={5} format="HH:00"></TimePicker>

                    <InputNumber/>

                    <InputNumber min="0" max="10" step="0.1" disabled/>

                    <InputNumber min="0" value="100" max="100"
                        formatter={(value)=>`${value}%`}
                        parser={(value)=>value.replace('%', '')}
                    />

                    <InputNumber
                      value={1000}
                      formatter={value => `$ ${value.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}`}
                      parser={value => value.replace(/\$\s?|(,*)/g, '')}
                    />

                    <InputNumber size="large"/>
                    <InputNumber size="small" theme="primary"/>
                    <InputNumber size="large" theme="success"/>
                    <InputNumber size="large" theme="warning"/>
                    <InputNumber size="large" theme="danger"/>


                    <pre className="brush: js" ref="code1">
                        {
`

`
                        }
                    </pre>


                </Tile>
            </div>
        )
    }
}

module.exports = TabPage;
